<template>
	<view class="content">
		<view class="map idx">
			<view v-if="lunboData.length>0">
				<view class="container1">
					<!-- 轮播图 -->
					<swiper class="home-swiper" indicator-dots="true" :circular="circular" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<block v-for="(item, index) in lunboData">
							<swiper-item>
								<image :src="item" mode="aspectFill" class="slide-image" />
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
		</view>
		<!-- <view class="d-flex j-sb bg-white-color">
			<view class="mx-30 my-30 font-size36 font-weight7">精选圈子</view>
			<view class="mx-30 my-30 font-size32 tn-color-grey d-flex j-sb" @click="tap('/pages/square/circle')">
				<text class="tn-padding-xs">全部</text>
				<u-icon name="list" size="16"></u-icon>
			</view>
		</view> -->
		<!-- <view class="tn-strip-bottom tn-skeleton bg-white-color">
			<view class="d-flex flex-wrap tn-margin-bottom">
				<view style="width: 33.3%;" class="" v-for="(item,index) in circle" @click="tap('/pages/square/group')">
					<view class="d-flex j-center a-center flex-column">
						<view class="px-20 py-20 u-border-radius-6">
							<uni-view class="image-pic " style="width: 80px; height: 80px; background-image: url('/static/imgaes/69c10d790b7b86c347576e628a0993f3.jpeg');">
								<image style="width: 80px; height: 80px;" :src="item.img"></image>
							</uni-view>
							<view class="font-weight7 tn-text-center tn-padding-top-xs">{{item.title}}</view>
							<view class="tn-text-center tn-padding-top-xs tn-color-gray--dark font-size20">{{item.number}}人关注</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="d-flex flex-column">
			<!-- 循环内容 -->
			<view class="blogger__item" v-for="(item,index) in 9">
				<view class="view-bg-color item_list">
				<!-- 头像名称 -->
				<view class="d-flex a-center j-sb" @click="tap('/pages/square/my')">
					<view class="justify__author__info">
						<view class="d-flex j-center">
							<view class="d-flex a-center j-center">
								<view class="">
									<view class="tn-avatar--circle tn-avatar--lg tn-avatar">
										<image class="tn-avatar__img  tn-avatar__img--circle" :src="head"></image>
									</view>
								</view>
								<view class="tn-text-ellipsis tn-padding-right">
									<view class="font-size32 tn-padding-left-sm tn-padding-right">
										<text class="font-weight7 view-title1-color">如花的旋律</text>
										<text class="dk-lv">LV 1</text>
									</view>
									<view class="tn-padding-left-sm tn-padding-right tn-padding-top-xs tn-color-gray">2023-12-22 15:12:05</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 推荐 -->
				<view class="d-flex j-start" @click="tap('/pages/community/detail')">
					<text class="tj tn-main-gradient-orangered--reverse tn-icon-praise tn-btn-class tn-round">推荐</text>
					<text class="tj tn-main-gradient-orangered--reverse tn-icon-praise tn-btn-class tn-round">置顶</text>
				</view>
				<!-- 标题 -->
				<view class="dk-top-10 tn-text-content" @click="tap('/pages/community/detail')">
					<view class="tn-text-ellipsis-3">
						<text class="font-weight7 tn-color-blue">#为什么恋爱会让人降智#</text>
						<text class="font-weight7 tn-color-blue">#为什么玩得好的人学得也好#</text>
						<text class="font-weight7 tn-color-blue">#谈恋爱长相重要吗#</text>
						uu们?没想到这保暖衣这么好穿！穿上和没穿一样！！ . 前两天下了一场不太解渴的雨 直接导致气温速降！！短袖都有点穿不住了 火速去做肌底衣功课 满足我的诉求☑️不会起球☑️穿着保暖舒适 这个ubras肌底衣我要封神了 咱就是说安全下车了！！ 到手就是一整个惊艳！ . 软糯糯的亲肤感把我折服了 差点以为被棉花糖包裹了！ 我之前皮肤敏感抗拒穿打底衣 有一半原因就是穿久了会痒，起静电 这个面料里面加入了氨基酸 像给皮肤贴面膜一样 一整个沙漠干柴皮?大救星 比普通打底衣更舒服 干燥起电再也没体验过！！ . 薄薄的但锁温效果很好 穿上一会身上就暖暖的 像是恒温“小空调”一样！ 穿了就舍不得脱 . 作为内搭也很百搭！ ?居家当家居服 ?出门搭配宽松卫衣大衣秒秒出圈 这是我反复“剁手”停不下来的重要原因！！ 版型超好看 ❗️很贴身！很收肉（但又不会紧绷难受！） 以往买的打底衣勒得慌 这个就不会！弹力贼好 穿上它再穿牛仔裤 都能弹跳自如！！ 而且也不会臃肿显胖 咱终于“风度”和“温度”两相全了！ 秋冬也能当辣妹！ 谁让它就是很显身材啊！！ . 当然??最牛掰的还是 不仅贴肤舒服，随便扔洗衣机也不娇气！不变形不起球 直接给我妈我姐安排了两套 都被夸到爆！
					</view>
				</view>
				<!-- 图片 -->
				<view class="tn-padding-top-xs" @click="tap('/pages/community/detail')">
					<view class="tn-grid">
						<view class="tn-grid-item" v-for="(item,index) in iamges">
							<view class="tn-grid-item__box">
								<image mode="aspectFill" :src="item" class="blogger__main-image blogger__main-image--3"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 功能 -->
				<view class="d-flex a-center j-sb tn-margin-top-xs" @click="tap('/pages/community/detail')">
					<view class="tn-text-center tn-color-gray">
						<view class="d-flex a-center">
							<u-icon name="eye-fill" size="16"></u-icon>
							<text class="tn-padding-right">15</text>
							<u-icon name="chat" size="16"></u-icon>
							<text class="tn-padding-right">5</text>
							<u-icon name="thumb-up" size="16"></u-icon>
							<text class="">2</text>
						</view>
					</view>
					<view class="d-flex a-center">
						<view class="plh">
							<view class="d-flex flex-row">
								<view class="tn-avatar-group__item" v-for="(item,index) in 2">
									<view class="tn-avatar tn-avatar--sm tn-avatar--circle plhs">
										<image :src="plh" class="tn-avatar__img--circle tn-avatar__img"></image>
									</view>
								</view>
							</view>
						</view>
						<text class="tn-color-gray">2人</text>
					</view>
				</view>
			</view>
			</view>
			<!-- end -->
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:1,
				autoplay: true,
				interval: 3000,
				duration: 1000,
				circular: true,
				lunboData: [],
				baseUrl: this.$baseUrl,
				page: 1,
				limit: 10,
				ip:'',
				is:1,
				pid:1,
				scrollTop: 0,
				head:'/static/bg/head1.png',
				plh:'/static/bg/head.png',
				circle:[
					{'title':'动漫二次元','img':'/static/bg/6.png','number':2},
					{'title':'健身俱乐部','img':'/static/bg/6.png','number':5},
					{'title':'宠物之家','img':'/static/bg/6.png','number':0},
					{'title':'游戏专区','img':'/static/bg/6.png','number':0},
					{'title':'沙雕乐趣多','img':'/static/bg/6.png','number':1},
					{'title':'全日小酒馆','img':'/static/bg/6.png','number':1},
				],
				iamges:[
					'/static/banner/banner4.png',
					'/static/banner/banner4.png',
					'/static/banner/banner4.png',
					'/static/banner/banner4.png',
					'/static/banner/banner4.png',
					'/static/banner/banner4.png'
				],
				scrollTop: 0
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.tn-color-grey{
		color: #78909c;
	}
	.tn-padding-xs{
		padding: 10rpx;
	}
	.tn-strip-bottom{
		width: 100%;
		border-bottom: 10px solid hsla(0,0%,94.5%,.8);
	}
	.tn-text-center{
		text-align: center;
	}
	.tn-color-gray--dark{
		color: #838383!important;
	}
	.tn-color-gray{
		color: #fff!important;
	}
	.tn-padding-top-xs{
		padding-top: 10rpx;
	}
	.tn-margin-bottom{
		margin-bottom: 30rpx;
	}
	.tn-margin-top-sm{
		margin-top: 20rpx;
	}
	.blogger__item{
		padding: 30rpx;
	}
	.item_list{
		padding: 20rpx;
		border-radius: 10rpx;
	}
	.tn-text-ellipsis {
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	.tn-padding-right{
		padding-right: 30rpx;
	}
	.tn-padding-left-sm{
		padding-left: 10px;
	}
	.dk-lv{
		background-image: repeating-linear-gradient(45deg,#892fe8,#5f4fd9);
		border-radius: 5000rpx!important;
		font-size: 24rpx;
		padding: 2rpx 20rpx;
		margin: 10rpx;
		color: #fff;
	}
	.tn-avatar--circle{
	    border-radius: 50%;
	}
	.tn-avatar__img{
	    width: 100%;
	    height: 100%;
		border-radius: 50%;
	}
	.tn-avatar--lg{
	    width: 100rpx !important;
	    height: 100rpx !important;
	}
	.tn-avatar{
	    display: inline-flex;
	    margin: 0;
	    padding: 0;
	    text-align: center;
	    align-items: center;
	    justify-content: center;
	    background-color: #e6e6e6;
	    white-space: nowrap;
	    position: relative;
	    width: 66rpx;
	    height: 66rpx;
	    z-index: 1;
	}
	.tn-main-gradient-orangered--reverse {
	    background-image: repeating-linear-gradient(-45deg,#ff7043,#e83a30);
	    color: #fff;
	}
	.tn-color-white {
	    color: #fff!important;
	}
	.tn-round {
	    border-radius: 2620px!important;
	}
	.tj{
		padding: 0px 20rpx;
		font-size: 24rpx;
		margin: 10rpx 0 0 10rpx;
		width: auto;
	}
	.dk-top-10 {
	    margin-top: 8rpx;
	}
	.tn-text-content {
	    line-height: 1.6;
	}
	.tn-text-ellipsis-3 {
	    display: -webkit-box;
	    overflow: hidden;
	    white-space: normal!important;
	    text-overflow: ellipsis;
	    word-wrap: break-word;
	    -webkit-line-clamp: 3;
	    -webkit-box-orient: vertical;
	}
	.tn-color-blue{
		color: #3d7eff!important;
	}
	.tn-grid{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	}
	.tn-grid-item{
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		flex-direction: column;
		width: 30%;
		margin: 5px;
	}
	.tn-grid-item__box{
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	    flex: 1;
	    width: 100%;
	    height: 100%;
	}
	.blogger__main-image{
		border-radius: 16rpx;
	}
	.blogger__main-image--3{
	    height: 212rpx;
	    width: 100%;
	}
	.tn-margin-top-xs{
		margin-top: 10rpx;
	}
	.plh{
		margin-right: 10rpx;
		margin-left: 20rpx;
	}
	.tn-avatar-group__item{
		position: relative;
	}
	.tn-avatar--sm{
	    width: 50rpx;
	    height: 50rpx;
	}
	.plhs{
		background: rgba(255, 255, 255, 0.4);
		border: 2px solid rgba(0, 0, 0, 0.1);
		margin-left: -40rpx;
	}
</style>